{% extends "base.html" %}
{% block title %}Vaultora — My Files{% endblock %}

{% block content %}

<!-- Stats Row -->
<div class="row mb-4">
    <div class="col-md-4">
        <div class="card p-3 text-center">
            <div class="text-muted small mb-1">TOTAL FILES</div>
            <h3 class="mb-0 fw-bold text-primary">{{ files | length }}</h3>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card p-3 text-center">
            <div class="text-muted small mb-1">LOGGED IN AS</div>
            <h3 class="mb-0 fw-bold text-success">{{ session['user'] }}</h3>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card p-3 text-center">
            <div class="text-muted small mb-1">ROLE</div>
            <h3 class="mb-0 fw-bold text-warning">{{ session['role'] | upper }}</h3>
        </div>
    </div>
</div>

<div class="row">

    <!-- Upload Panel -->
    <div class="col-md-4">
        <div class="card p-4 mb-4">
            <h5 class="mb-3">📤 Upload File</h5>
            <form action="/upload" method="POST" enctype="multipart/form-data" id="uploadForm">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>

                <div class="mb-3">
                    <label class="form-label fw-semibold">Choose File</label>
                    <input type="file" name="file" class="form-control" id="fileInput" required />
                    <div class="form-text" id="fileNameDisplay">No file selected</div>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold">Retention (days)</label>
                    <input type="number" name="retention_days" class="form-control"
                           value="0" min="0" max="365"
                           title="0 = keep forever"/>
                    <div class="form-text">Set 0 to keep forever</div>
                </div>

                <button type="submit" class="btn btn-primary w-100" id="uploadBtn">
                    🔒 Encrypt &amp; Upload
                </button>

                <!-- Upload progress bar (hidden until submit) -->
                <div class="progress mt-3 d-none" id="progressWrapper">
                    <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary"
                         role="progressbar" style="width: 100%">
                        Uploading...
                    </div>
                </div>
            </form>
        </div>

        <!-- Security Status Card -->
        <div class="card p-4">
            <h5 class="mb-3">🛡️ Security Status</h5>
            <ul class="list-unstyled mb-0">
                <li class="mb-2">
                    <span class="badge bg-success me-2">✓</span>AES-256 Encryption
                </li>
                <li class="mb-2">
                    <span class="badge bg-success me-2">✓</span>Two-Factor Auth
                </li>
                <li class="mb-2">
                    <span class="badge bg-success me-2">✓</span>CSRF Protection
                </li>
                <li class="mb-2">
                    <span class="badge bg-success me-2">✓</span>Rate Limiting
                </li>
                <li class="mb-2">
                    <span class="badge bg-success me-2">✓</span>Integrity Checks
                </li>
                <li class="mb-2">
                    <span class="badge bg-success me-2">✓</span>Malware Scanning
                </li>
            </ul>
        </div>
    </div>

    <!-- Files Table -->
    <div class="col-md-8">
        <div class="card p-4">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0">📁 My Files</h5>
                {% if session.get('role') == 'admin' %}
                    <a href="/admin/dashboard" class="btn btn-sm btn-outline-secondary">
                        🛡️ Admin Panel
                    </a>
                {% endif %}
            </div>

            <!-- Search bar -->
            <input type="text" id="searchBar" class="form-control mb-3"
                   placeholder="🔍 Search files by name..."/>

            {% if files %}
            <div class="table-responsive">
                <table class="table table-hover align-middle" id="filesTable">
                    <thead class="table-light">
                        <tr>
                            <th>Filename</th>
                            <th>Uploaded</th>
                            <th>Expires</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for file in files %}
                    <tr>
                        <td>
                            <span class="me-2">📄</span>
                            <strong>{{ file.filename }}</strong>
                        </td>
                        <td class="text-muted small">
                            {{ file.uploaded_at.strftime('%Y-%m-%d') if file.uploaded_at else '—' }}
                        </td>
                        <td>
                            {% if file.expiry_at %}
                                <span class="badge bg-warning text-dark">
                                    {{ (file.expiry_at | int) | format_expiry }}
                                </span>
                            {% else %}
                                <span class="badge bg-secondary">Never</span>
                            {% endif %}
                        </td>
                        <td>
                            <div class="d-flex gap-1 flex-wrap">
                                <a href="/download/{{ file.filename }}"
                                   class="btn btn-sm btn-outline-primary">
                                    ⬇ Download
                                </a>
                                <button class="btn btn-sm btn-outline-secondary"
                                        onclick="shareFile('{{ file.filename }}')">
                                    🔗 Share
                                </button>
                                <form action="/delete/{{ file.filename }}"
                                      method="POST" class="d-inline">
                                    <input type="hidden" name="csrf_token"
                                           value="{{ csrf_token() }}"/>
                                    <button class="btn btn-sm btn-outline-danger"
                                            onclick="return confirm('Delete {{ file.filename }}?')">
                                        🗑 Delete
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="text-center py-5 text-muted">
                <div style="font-size: 3rem;">🗂️</div>
                <p class="mt-2">No files uploaded yet.<br/>
                   Upload your first file using the panel on the left.</p>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Share Modal -->
<div class="modal fade" id="shareModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">🔗 Share File</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="shareForm" method="POST">
                <div class="modal-body">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                    <div class="mb-3">
                        <label class="form-label">Set a password for this link</label>
                        <input type="password" name="password" id="sharePassword"
                               class="form-control" required placeholder="Link password"/>
                    </div>
                    <div class="alert alert-info small mb-0">
                        The link expires in <strong>1 hour</strong> and can only be used once.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                            data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Generate Link</button>
                </div>
            </form>
            <!-- Link result shown after generation -->
            <div class="modal-body d-none" id="shareLinkResult">
                <label class="form-label fw-semibold">Your share link:</label>
                <div class="input-group">
                    <input type="text" id="shareLinkText" class="form-control" readonly/>
                    <button class="btn btn-outline-secondary"
                            onclick="copyShareLink()">Copy</button>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
// Live file search
document.getElementById("searchBar").addEventListener("input", function () {
    const val = this.value.toLowerCase();
    document.querySelectorAll("#filesTable tbody tr").forEach(row => {
        const name = row.cells[0].textContent.toLowerCase();
        row.style.display = name.includes(val) ? "" : "none";
    });
});

// Show filename on file input change
document.getElementById("fileInput").addEventListener("change", function () {
    const name = this.files[0] ? this.files[0].name : "No file selected";
    document.getElementById("fileNameDisplay").textContent = name;
});

// Show progress bar on upload submit
document.getElementById("uploadForm").addEventListener("submit", function () {
    document.getElementById("progressWrapper").classList.remove("d-none");
    document.getElementById("uploadBtn").disabled = true;
    document.getElementById("uploadBtn").textContent = "Uploading...";
});

// Share modal
function shareFile(filename) {
    const form = document.getElementById("shareForm");
    form.action = "/share/" + filename;
    document.getElementById("shareLinkResult").classList.add("d-none");
    document.getElementById("sharePassword").value = "";
    new bootstrap.Modal(document.getElementById("shareModal")).show();
}

document.getElementById("shareForm").addEventListener("submit", async function (e) {
    e.preventDefault();
    const formData = new FormData(this);
    const response = await fetch(this.action, {
        method: "POST",
        body: formData
    });
    const data = await response.json();
    if (data.link) {
        const fullLink = window.location.origin + data.link;
        document.getElementById("shareLinkText").value = fullLink;
        document.getElementById("shareLinkResult").classList.remove("d-none");
    }
});

function copyShareLink() {
    const text = document.getElementById("shareLinkText").value;
    navigator.clipboard.writeText(text).then(() => {
        alert("Link copied to clipboard!");
    });
}
</script>
{% endblock %}